import { _decorator, Component, Node, Vec3, Touch, UITransform, v3 } from 'cc';
const { ccclass, property } = _decorator;
 
/**
 * Predefined variables
 * Name = JoyStick
 * DateTime = Mon Jun 20 2022 14:42:05 GMT+0800 (中国标准时间)
 * Author = fangfan001
 * FileBasename = JoyStick.ts
 * FileBasenameNoExtension = JoyStick
 * URL = db://assets/scripts/JoyStick.ts
 * ManualUrl = https://docs.cocos.com/creator/3.4/manual/zh/
 *
 */
 
@ccclass('JoyStick')
export class JoyStick extends Component {
    //大圆
    @property(Node)
    panel: Node = null;
    //小圆
    @property(Node)
    btn: Node = null;
 
    //小圆在大圆中移动的限制距离
    private panelWidth: number = 100;
    //大圆初始位置
    private panelInitPos: Vec3;
 
    //触摸ID
    private touchID: number;
 
    //用于保存移动方向向量
    public dir: Vec3 = new Vec3(0, 0, 0);
    //保存弧度(角度)
    public angle: number = 0;
 
    //是否正在移动
    public moving: boolean = false;
 
    onLoad() {
        //初始化大圆的为止
        this.panelInitPos = new Vec3(-4, -150, 0);
    }
 
    start() {
        this.node.on(Node.EventType.TOUCH_START, this.onTouchStart, this);
        this.node.on(Node.EventType.TOUCH_MOVE, this.onTouchMove, this);
        this.node.on(Node.EventType.TOUCH_END, this.onTouchEnd, this);
        this.node.on(Node.EventType.TOUCH_CANCEL, this.onTouchCancel, this);
    }
 
    public stop() {
        this.node.off(Node.EventType.TOUCH_START, this.onTouchStart, this);
        this.node.off(Node.EventType.TOUCH_MOVE, this.onTouchMove, this);
        this.node.off(Node.EventType.TOUCH_END, this.onTouchEnd, this);
        this.node.off(Node.EventType.TOUCH_CANCEL, this.onTouchCancel, this);
 
        this.moving = false;
        this.enabled = false;
    }

    public getDir()
    {
        return this.dir;
    }
 
    private onTouchStart(e: Touch) {
 
        //触摸点世界坐标转成局部坐标
        let uiTransform = this.node.getComponent(UITransform);
        let p = new Vec3(e.getLocation().x, e.getLocation().y, 0);
        let pos = new Vec3();
        uiTransform.convertToNodeSpaceAR(p, pos);
 
        //当触摸时设置大圆和小圆的显示位置
        this.panel.setPosition(pos);
        this.btn.setPosition(new Vec3(0, 0, 0));
        this.touchID = e.getID();
        this.moving = false;
        this.enabled = true;
    }
 
    private onTouchMove(e: Touch) {
 
 
        if (this.touchID != e.getID()) {
            return;
        }
        //小圆移动，改变小圆实时位置
        let posDelta = e.getDelta();
        //console.log("posDelta", this.btn.getPosition());
        let x = this.btn.getPosition().x + posDelta.x;
        let y = this.btn.getPosition().y + posDelta.y;
        //console.log("posDelta",x,y);
        this.btn.setPosition(new Vec3(x, y, 0));
        //正在移动
        this.moving = true;
    }
 
    update() {
 
        if (this.moving) {
            //将小圆限制大圆范围内
            //console.log("this.btn.position", this.btn.position);
            let ratio = this.btn.position.length() / this.panelWidth;
            let xbi = this.btn.position.x / this.btn.position.length();
            let ybi = this.btn.position.y / this.btn.position.length();
            //console.log("ratio", this.btn.position.length());
            if (ratio > 1) {
 
                this.btn.setPosition(new Vec3(xbi * this.panelWidth, ybi * this.panelWidth, 0));
            }
            //保存向量方向
            this.dir = new Vec3(xbi, ybi, 0);
            //console.log("this.dir", this.dir);
            //获取弧度
            this.angle = Math.atan2(this.btn.getPosition().y, this.btn.getPosition().x);
        }
    }
 
    private onTouchEnd(e: Touch) {
        //还原大圆和小圆位置
        if (this.touchID != e.getID()) {
            return;
        }
        this.panel.setPosition(this.panelInitPos);
        this.btn.setPosition(new Vec3(0, 0, 0));
        this.moving = false;
        this.enabled = false;
    }
 
    private onTouchCancel(e: Touch) {
        if (this.touchID != e.getID()) {
            return;
        }
        this.panel.setPosition(this.panelInitPos);
        this.btn.setPosition(0, 0);
        this.moving = false;
        this.enabled = false;
    }
 
    onDestroy() {
        this.stop();
    }
 
}